<template>
  <view class="container">
		<nav-ber :title="'科室选择'" :bgColor="'#f7f8ff'"></nav-ber>
		<view class="sea_pad">
			<u-search placeholder="搜索科室名称" v-model="keyword" :showAction="false" shape="round"></u-search>
		</view>
		<view class="flex_box">
			<view class="province">
				<view  v-for="(item, index) in depList" :key="item" :class="{
					'pro_list': true,
					'pro_list_is': (ispro == index)
					}" @click="proFun(index)">{{ item.name }}</view>
			</view>
			<view class="province" style="background-color: #fff;">
				<view v-for="(item) in depaItemList" :key="item" :class="{
					'pro_list': true,
					}">{{ item.name }}</view>
			</view>
		</view>
  </view>
</template>
<script>
  export default {
    data() {
			return {
				depList: [
					{
						name: '内科'
					},
					{
						name: '外科'
					},
					{
						name: '骨科'
					},
					{
						name: '妇产科'
					},
					{
						name: '儿科'
					},
					{
						name: '肿瘤科'
					},
					{
						name: '口腔科'
					}
				],
				depaItemList: [
					{
						name: '普内科'
					},
					{
						name: '心血管内科'
					},
					{
						name: '神经内科'
					},
					{
						name: '消化内科'
					},
					{
						name: '呼吸内科'
					},
					{
						name: '肾内科'
					},
					{
						name: '高压氧科'
					},
					{
						name: '内分泌科'
					}
				],
				keyword: '',
				ispro: 0,
			}
    },
		methods: {
			proFun(val) {
				this.ispro = val
			}
		}
  }
</script>
<style lang="scss" scoped>
	.sea_pad {
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}
	.container {
		background-color: #f7f8ff;
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}
	.province {
		flex: 1;
		overflow: scroll;
		// padding: 0 20rpx;
		// margin-top: 20rpx;
	}
	.pro_list {
		padding: 20rpx 50rpx;
		box-sizing: border-box;
	}
	.pro_list_is {
		background-color: #fff;
		color: #2979ff;
		position: relative;
	}
	.pro_list_is::before {
		content: '';
		display: block;
		width: 10rpx;
		height: 50rpx;
		background-color: #2979ff;
		position: absolute;
		left: 5rpx;
	}
	.flex_box {
		flex: 1;
		overflow: hidden;
		display: flex;
	}
</style>
